<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- /导航栏 -->

    <!-- 个人信息 -->
    <van-cell
      class="avatar-cell"
      @click="$refs.imgRef.click()"
      title="头像"
      is-link
      center
    >
      <!-- html标签加上hidden属性之后，就看不见了 -->
      <input type="file" hidden ref="imgRef" @change="changeImg" />
      <van-image class="avatar" round fit="cover" :src="userInfo.photo" />
    </van-cell>
    <van-cell
      title="昵称"
      @click="isUpdateName = true"
      :value="userInfo.name"
      is-link
    />
    <van-cell
      title="性别"
      @click="isUpdateSex = true"
      :value="userInfo.gender === 0 ? '男' : '女'"
      is-link
    />
    <van-cell
      title="生日"
      @click="isUpdateBirthday = true"
      :value="userInfo.birthday"
      is-link
    />
    <!-- /个人信息 -->

    <van-popup position="bottom" style="height: 100vh" v-model="isUpdatePhoto">
      <update-photo
        @updatePhoto="userInfo.photo = $event"
        :img="previewUrl"
        @close="isUpdatePhoto = false"
      />
    </van-popup>
    <van-popup position="bottom" style="height: 100vh" v-model="isUpdateName">
      <!-- <update-name
        @input="userInfo.name = $event"
        :value="userInfo.name"
        @close="isUpdateName = false"
      /> -->
      <update-name
        v-if="isUpdateName"
        v-model="userInfo.name"
        @close="isUpdateName = false"
      />
    </van-popup>
    <van-popup position="bottom" v-model="isUpdateSex">
      <update-sex
        v-if="isUpdateSex"
        v-model="userInfo.gender"
        @close="isUpdateSex = false"
      />
    </van-popup>
    <van-popup position="bottom" v-model="isUpdateBirthday">
      <update-birthday
        v-if="isUpdateBirthday"
        v-model="userInfo.birthday"
        @close="isUpdateBirthday = false"
      />
    </van-popup>
  </div>
</template>
<script>
import { getUserInfo } from "@/api/User";
import UpdateName from "./components/update-name.vue";
import UpdateSex from "./components/update-sex.vue";
import UpdateBirthday from "./components/update-birthday.vue";
import UpdatePhoto from "./components/update-photo.vue";
export default {
  name: "UserProfile",
  components: {
    UpdateName,
    UpdateSex,
    UpdateBirthday,
    UpdatePhoto,
  },
  data() {
    return {
      previewUrl: "",
      userInfo: {},
      isUpdatePhoto: false,
      isUpdateName: false,
      isUpdateSex: false,
      isUpdateBirthday: false,
    };
  },
  created() {
    this.initData();
  },
  methods: {
    async initData() {
      try {
        let { data } = await getUserInfo();
        this.userInfo = data.data;
      } catch (error) {
        this.$toast.fail("获取资料失败");
        console.log(error);
      }
    },
    changeImg() {
      // 文件控件的value发送变化的时候触发
      console.log("文件发送了变化");
      const imgFile = this.$refs.imgRef.files[0];
      console.log(imgFile);
      // 1.判断文件的类型
      const typeArr = ["image/jpg", "image/jpeg", "image/png", "image/gif"];
      if (!typeArr.includes(imgFile.type)) {
        return this.$toast.fail("文件类型不正确");
      }
      // 2.判断文件的大小
      const maxSize = 1024 * 1024 * 3; // B   1024B===1kb   1024kb=1M
      if (imgFile.size > maxSize) return this.$toast.fail("文件不允许超过3M");
      // 3.生成预览地址（传递给update-photo组件）
      this.previewUrl = URL.createObjectURL(imgFile);
      // 4.打开弹框
      this.isUpdatePhoto = true;
      // 5.清空控件value
      this.$refs.imgRef.value = null;
    },
  },
};
</script>

<style scoped lang="less">
.user-profile {
  .avatar-cell {
    .van-cell__value {
      display: flex;
      flex-direction: row-reverse;
    }
    .avatar {
      width: 60px;
      height: 60px;
    }
  }
  .van-popup {
    background-color: #f5f7f9;
  }
}
</style>
